<template>
	<view class="container">
		<!-- 顶部标题区域 -->
		<view class="header">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in 2" :key="index">
					<image class="swiper-item"  mode="scaleToFill" src="/static/images/7f764316716de5182e0791cfd6356e03.png" />
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 功能导航菜单 -->
		<view class="nav-menu">
			<view class="nav-item" v-for="(item, index) in navItems" :key="index" @click="navigateTo(item)">
				<view class="nav-icon" :style="{backgroundColor: item.bgColor,backgroundImage:`url(${item.icon})`}" />
				<text class="nav-text">{{item.title}}</text>
			</view>
		</view>
		
		<!-- 通知区域 -->
		<view class="notice-bar">
			<view class="notice-image">
				<image src="/static/notice.png" mode="widthFix"></image>
			</view>
			<swiper class="notice-swiper" circular vertical :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in 2" class="notice-item" :key="index">
					<text class="notice-text">通告{{item}}</text>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 账户信息卡片 -->
		<view class="account-card">
			<view class="account-info">
				<view class="account-avatar">
					<image :src="userInfo.avatar?userInfo.avatar:'/static/64.jpg'" mode="aspectFit"></image>
					<view class="">
						<view class="privilege-center">{{userInfo.memberStatus!=0?'特级会员':'普通用户'}}</view>
						<text class="account-date">注册时间:{{userInfo.createTime}}</text>
					</view>
				</view>
				<view class="account-detail">
					<view class="upgrade-btn" @click="handleUpgrade">{{userInfo.memberStatus!=0?'特权中心':'前往升级'}}</view>
				</view>
			</view>			
			<view class="account-balance">
				<view class="balance-item" @click="viewNotices">
					<text class="balance-title">奖励钱包</text>
					<text class="balance-amount">0.00</text>
				</view>
				<view class="balance-item">
					<text class="balance-title" @click="viewNotices">奖励钱包</text>
					<text class="balance-amount">0.00</text>
				</view>
			</view>
		</view>
		
		<!-- 客服支持区域 -->
		<view class="customer-service">
			<view class="service-info">
				<view class="service-title">
					<text class="service-date">注册时间:2025-03-04</text>
					<text class="service-name">官方售后受理</text>
				</view>
				<text class="service-desc">服务问题/交易问题，2小时内急速受理</text>
			</view>
			<view class="service-btn" @click="applyService">申请售后</view>
		</view>
		<cosPupop ref="openP" />
		<cenPupop ref="cenP" />
	</view>
</template>

<script>
/**
 * 个人中心页面
 * @description 显示用户账户信息、功能导航和客服支持
 */
import cosPupop from "@/components/cos-pupop/cos-pupop.vue"
import cenPupop from "@/components/cen-pupop/cen-pupop.vue"
export default {
	components:{cosPupop,cenPupop},
	data() {
		return {
			showPrice:0.00,
			/**
			 * 导航菜单项
			 * @type {Array}
			 */
			navItems: [
				{
					title: '我的机具',
					icon: '/static/images/nav_1.png',
					path: '/pages/tools/index',
					bgColor: '#7FB3F5'
				},
				{
					title: '交易记录',
					icon: '/static/images/nav_2.png',
					path: '/pages/transaction/index',
					bgColor: '#8C9EFF'
				},
				{
					title: '奖励钱包',
					icon: '/static/images/nav_3.png',
					path: '/pages/wallet/reward',
					bgColor: '#90CAF9'
				},
				{
					title: '积分钱包',
					icon: '/static/images/nav_4.png',
					path: '/pages/wallet/points',
					bgColor: '#64B5F6'
				}
			]
		};
	},
	computed:{
		 userInfo(){
			 return this.$store.state.userInfo
		 }
	},
	onLoad() {
		 this.getUser()
		 this.getPirce()
	},
	methods: {
		async getPirce(){
			const {data:res} = await this.$api('/app/getAgreement','GET',{code:"member_price"})
			this.showPrice = Number(res.data).toFixed(2)
		},
		/**
		 * 导航到指定页面
		 * @param {String} path - 页面路径
		 */
		navigateTo(item) {
			if(item.title=="我的机具"){
				if(this.$store.state.userInfo.memberStatus){
					uni.navigateTo({
						url:"/pages/myBack/myBack"
					})
				}else{
					this.$refs.cenP.open()
				}
			}else if(item.title=="奖励钱包"){
				uni.navigateTo({
					url:"/pages/wallet/wallet"
				})
			}else{
				uni.showToast({
					icon:'none',
					title: '暂未开放'
				});
			}
		},
		async getUser(){
			const {data:res} = await this.$api('/app/getInfo','GET')
			if(res.code!=200)return
			this.userInfo = res.data
			this.$store.dispatch('setUserData',res.data)
			console.log(res)
			if(res.data.signState==false&&this.userInfo.memberStatus!=0){
				uni.showModal({
					title: '提示',
					content: '您支付后未签名，前往签名',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url:"/pages/html2pdf/html2pdf"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		/**
		 * 查看通知列表
		 */
		viewNotices() {
			uni.navigateTo({
				url:"/pages/wallet/wallet"
			})
		},
		/**
		 * 处理账户升级
		 */
		handleUpgrade() {
			this.$refs.openP.open()
		},
		
		/**
		 * 申请售后服务
		 */
		applyService() {
			uni.navigateTo({
				url: '/pages/feedback/feedback'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	box-sizing: border-box;
}
.header {
     width: 100vw;
	 height: 450rpx;
	 .swiper{
		width: 100vw;
		height: 450rpx;
		 .swiper-item{
			 width: 100vw;
			 height: 500rpx;
		 }
	 }
}
.nav-menu {
	width:calc(100% - 60rpx);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: -60rpx;
	position: relative;
	z-index: 10;
	font-weight: 550;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.nav-item {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	align-items: center;
	width: 25%;
}

.nav-icon {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10rpx;
	background-size: 108rpx 108rpx;
	background-position: -8rpx -8rpx;
	box-shadow: 0 0rpx 5rpx 5rpx rgba(0, 0, 0, 0.05);
}
.nav-text {
	font-size: 26rpx;
	color: #333333;
}

.notice-bar {
	width:calc(100% - 60rpx);
	margin: 0 auto;
	margin-top: 20rpx;
	border-radius: 15rpx;
	height: 80rpx;
	background: linear-gradient(-10deg, rgba(255,255,255,0.5) 0%, rgba(235,245,255,0.5) 100%);
	border: 2rpx solid #d5e3f5;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 20rpx;
	overflow: hidden;
	.notice-image{
		width: 50rpx;
		image{
			width: 100%;
		}
	}
	.notice-swiper{
		flex: 1;
		background-color: transparent;
		height: 60rpx;
		.notice-item{
			width: 100%;
			.notice-text{
				display: block;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #363636;
				padding-left: 20rpx;
			}
		}
	}
}
.account-card {
	width:calc(100% - 60rpx);
	margin: 0 auto;
	background: linear-gradient(-10deg, rgba(255,255,255,0.5) 0%, rgba(235,245,255,0.5) 100%);
	background-size: 100% 100%;
	border-radius: 20rpx;
	border: 2rpx solid #d5e3f5;
	margin-top: 30rpx;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
}

.account-info {
	width: 100%;
	display: flex;
	padding: 20rpx;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 30rpx;
	border-bottom:2rpx solid #d5e3f5;
}

.account-avatar {
	height: 120rpx;

	overflow: hidden;
	display: flex;
	align-items: center;
}

.account-avatar image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #fff;
	margin-right: 20rpx;
}

.account-detail {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.account-date {
	font-size: 26rpx;
	color: #999999;
}

.upgrade-btn {
	background-color: #2E3540;
	color: #FFFFFF;
	font-size: 26rpx;
	border-radius: 30rpx;
	font-size: 22rpx;
	font-weight: 550;
	padding: 10rpx 20rpx;
}

.account-balance {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
}

.balance-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15rpx;
}

.balance-title {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 10rpx;
}

.balance-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.customer-service {
	width:calc(100% - 60rpx);
	margin: 0 auto;
	background: linear-gradient(-10deg, rgba(255,255,255,0.5) 0%, rgba(235,245,255,0.5) 100%);
	border: 2rpx solid #d5e3f5;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
}

.service-info {
	flex: 1;
}

.service-title {
	margin-bottom: 10rpx;
}

.service-date {
	font-size: 26rpx;
	color: #000;
	font-weight: 400;
	display: block;
	margin-bottom: 10rpx;
}

.service-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.service-desc {
	font-size: 24rpx;
	color: #999999;
}

.service-btn {
	background-color: #2E3540;
	color: #FFFFFF;
	font-size: 26rpx;
	border-radius: 30rpx;
	font-size: 22rpx;
	font-weight: 550;
	padding: 10rpx 20rpx;
}
</style>
